<template>
  <div id="app">
    <!-- 标题 -->
    <div class="header">
      <div class="header-title">操作系统超级管理员X端</div>
    </div>
    <!-- 左中右布局容器 -->
    <div class="container-content">
      <!-- 左侧区域 -->
      <div class="container-left fl">
        <!-- 第一个框：系统介绍信息 -->
        <div class="left-top common-frame border">
          <div class="info-wrapper">
            <p><span class="info-title">操作系统版本号：</span><span class="info-content">1.0.0</span></p>
            <p><span class="info-title">我的工号：</span><span class="info-content">123456</span></p>
            <p><span class="info-title">我的角色：</span><span class="info-content">管理员</span></p>
          </div>
        </div>
        <!-- 第二个框 -->
        <DashboardSection
            :title="'客户端'"
            :selectedYear="selectedYearClient"
            :years="years"
            :chartData="getChartData(selectedYearClient,'1')"
            :pieChartData="getChartData(selectedYearClient,'1')"
            :announcements="getAnnouncements(selectedYearClient, '1')"
            :height="80"
            @selectYear="handleSelectYearClient"
        >
          <template #bar-chart>
            <BarChart011
                :chartData="getChartData(selectedYearClient, '1')"
                chartId="client-bar-chart"
            />
          </template>
          <template #pie-chart>
            <PieChart011
                :chartData="getChartData(selectedYearClient, '1')"
                chartId="client-pie-chart"
            />
          </template>
        </DashboardSection>
      </div>
      <!-- 中间区域 -->
      <div class="container-middle fl">
        <div class="middle-wrapper">
          <div class="middle-left">

          </div>
          <div class="middle-middle"></div>
          <div class="middle-right"></div>
        </div>
      </div>
      <!-- 右侧区域 -->
      <div class="container-right fr">
        <div class="right-wrapper">
          <div class="right-top">
            <DashboardSection
                :title="'政务端'"
                :selectedYear="selectedYearGov"
                :years="years"
                :chartData="getChartData(selectedYearGov,'2')"
                :pieChartData="getChartData(selectedYearGov,'2')"
                :announcements="getAnnouncements(selectedYearGov, '2')"
                :height="50"
                @selectYear="handleSelectYearGov"
            >
              <template #bar-chart>
                <BarChart011
                    :chartData="getChartData(selectedYearGov, '2')"
                    chartId="gov-bar-chart"
                />
              </template>
              <template #pie-chart>
                <PieChart011
                    :chartData="getChartData(selectedYearGov, '2')"
                    chartId="gov-pie-chart"
                />
              </template>
            </DashboardSection>
          </div>
          <div class="right-bottom">
            <DashboardSection
                :title="'市场端'"
                :selectedYear="selectedYearMarket"
                :years="years"
                :chartData="getChartData(selectedYearMarket,'3')"
                :pieChartData="getChartData(selectedYearMarket,'3')"
                :announcements="getAnnouncements(selectedYearMarket, '3')"
                :height="50"
                @selectYear="handleSelectYearMarket"
            >
              <template #bar-chart>
                <BarChart011
                    :chartData="getChartData(selectedYearMarket, '3')"
                    chartId="market-bar-chart"
                />
              </template>
              <template #pie-chart>
                <PieChart011
                    :chartData="getChartData(selectedYearMarket, '3')"
                    chartId="market-pie-chart"
                />
              </template>
            </DashboardSection>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, watch } from 'vue';
import DashboardSection from './basicDataDashboardSection01.vue';
import BarChart011 from "@/views/dashboard/basicData/BarChart011.vue";
import PieChart011 from "@/views/dashboard/basicData/PieChart011.vue";

// 定义每个区域的当前选中年份
const selectedYearClient = ref('2025 年');
const selectedYearGov = ref('2025 年');
const selectedYearMarket = ref('2025 年');

// 定义年份数据
const years = [
  { value: '2023 年', label: '2023 年' },
  { value: '2024 年', label: '2024 年' },
  { value: '2025 年', label: '2025 年' },
];

// 模拟不同年份、不同类别的数据
const chartDataByYearAndCategory = {
  '2023 年': {
    '1': [
      { value: 268, name: 'A 公司' },
      { value: 129, name: 'B 公司' },
      { value: 300, name: 'C 公司' }
    ],
    '2': [
      { value: 100, name: 'D 公司' },
      { value: 150, name: 'E 公司' }
    ],
    '3': [
      { value: 80, name: 'F 公司' },
      { value: 220, name: 'G 公司' },
      { value: 180, name: 'H 公司' }
    ]
  },
  '2024 年': {
    '1': [
      { value: 270, name: 'A 公司' },
      { value: 110, name: 'B 公司' },
      { value: 350, name: 'C 公司' }
    ],
    '2': [
      { value: 120, name: 'D 公司' },
      { value: 180, name: 'E 公司' }
    ],
    '3': [
      { value: 270, name: 'F 公司' },
      { value: 150, name: 'G 公司' },
      { value: 360, name: 'H 公司' }
    ]
  },
  '2025 年': {
    '1': [
      { value: 200, name: 'A 公司' },
      { value: 300, name: 'B 公司' },
      { value: 400, name: 'C 公司' }
    ],
    '2': [
      { value: 140, name: 'D 公司' },
      { value: 220, name: 'E 公司' }
    ],
    '3': [
      { value: 110, name: 'F 公司' },
      { value: 280, name: 'G 公司' },
      { value: 230, name: 'H 公司' }
    ]
  }
};

// 模拟不同年份、不同类别的公告数据
const announcementsByYearAndCategory = {
  '2023 年': {
    '1': [
      {id: 1, title: '2023 客户端公告 1', content: '2023 客户端系统将于今晚 12 点进行维护。', type: 'A'},
      {id: 1, title: '2023 客户端公告 2', content: '2023 客户端系统将于今晚 12 点进行维护。', type: 'A'},
    ],
    '2': [
      {id: 3, title: '2023 政务端公告 1', content: '2023 政务端注意数据安全，切勿泄露。', type: 'A'},
    ],
    '3': [
      {id: 5, title: '2023 市场端公告 1', content: '2023 市场端公告 5。', type: 'A'},
    ]
  },
  '2024 年': {
    '1': [
      {id: 7, title: '2024 客户端公告 1', content: '2024 客户端系统将于今晚 12 点进行维护。', type: 'A'},
    ],
    '2': [
      {id: 9, title: '2024 政务端公告 1', content: '2024 政务端注意数据安全，切勿泄露。', type: 'A'},
    ],
    '3': [
      {id: 11, title: '2024 市场端公告 1', content: '2024 市场端公告 5。', type: 'A'},
    ]
  },
  '2025 年': {
    '1': [
      {id: 13, title: '2025 客户端公告 1', content: '2025 客户端系统将于今晚 12 点进行维护。', type: 'A'},
    ],
    '2': [
      {id: 15, title: '2025 政务端公告 1', content: '2025 政务端注意数据安全，切勿泄露。', type: 'A'},
    ],
    '3': [
      {id: 17, title: '2025 市场端公告 1', content: '2025 市场端公告 5。', type: 'A'},
    ]
  }
};

// 根据年份获取对应的图表数据
const getChartData = (year, category) => {
  const yearData = chartDataByYearAndCategory[year];
  if (yearData && yearData[category]) {
    return [...yearData[category]]; // 使用扩展运算符创建新数组
  }
  return []; // 如果年份数据不存在，返回空数组
};

// 根据年份和类别获取对应的公告数据
const getAnnouncements = (year, category) => {
  const yearData = announcementsByYearAndCategory[year];
  if (yearData && yearData[category]) {
    return [...yearData[category]];
  }
  return []; // 如果年份数据不存在，返回空数组
};

// 处理客户端区域年份选择的方法
const handleSelectYearClient = (year) => {
  selectedYearClient.value = year;
  console.log('客户端区域选中的年份:', year);
};

// 处理政务端区域年份选择的方法
const handleSelectYearGov = (year) => {
  selectedYearGov.value = year;
  console.log('政务端区域选中的年份:', year);
};

// 处理市场端区域年份选择的方法
const handleSelectYearMarket = (year) => {
  selectedYearMarket.value = year;
  console.log('市场端区域选中的年份:', year);
};

// 监听选中年份的变化，强制更新相关数据
watch([selectedYearClient, selectedYearGov, selectedYearMarket], () => {
});

</script>

<style scoped>
/* 覆盖样式 */
*,
body {
  font-family: Arial, sans-serif !important;
}

html, body {
  height: 100%; /* 设置 html 和 body 的高度为 100% */
  margin: 0;
  padding: 0;
}

.header {
  width: 100%;
  height: 10vh; /* 调整为视口高度的 10%，可根据需要调整 */
  display: flex;
  align-items: center;
  justify-content: center;
  .header-title {
    color: #ffffff;
    font-size: clamp(2rem, 3vw, 6rem);
    text-shadow: 0 0 0.15em #00d8ff;
  }
}

.container-content {
  padding: 0.1rem 1.5rem;
  display: flex; /* 添加 flex 布局 */
  .container-left {
    width: 25%; /* 调整宽度比例，可根据需要调整 */
    padding: 0.1rem;
    box-sizing: border-box;
    .left-top {
      width: 100%;
      margin-bottom: 2vh; /* 调整为视口高度的 2%，可根据需要调整 */
      line-height: clamp(1.2em, 3vw, 3em);
      color: #ffffff;
      font-size: clamp(0.3rem, 1vw, 2rem);
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: flex-start;
      .info-wrapper {
        margin: 0 clamp(0.3rem, 1vw, 10rem);
        max-width: 80%;
        .info-title {
          margin-left: 0;
          color: #309cea;
          font-weight: bold;
          box-sizing: border-box;
        }
        .info-content {
          padding: 0.3rem;
          font-weight: bold;
          box-sizing: border-box;
        }
      }
    }
  }
  .container-middle {
    width: 50%; /* 调整宽度比例，可根据需要调整 */
    padding: 0.1rem;
    box-sizing: border-box;
  }
  .container-right {
    width: 25%; /* 调整宽度比例，可根据需要调整 */
    box-sizing: border-box;
    padding: 0.1rem;
    .right-wrapper {
      .right-top {
        margin-bottom: 2vh; /* 调整为视口高度的 2%，可根据需要调整 */
        box-sizing: border-box;
      }
      .right-bottom {
        box-sizing: border-box;
      }
    }
  }
}
</style>

<style>
@import "@/assets/styles/global.css";
</style>